<template>
    <div v-for="item in qyList" :key="item.id" class="EnterpriseInformationListBox" :style="{ padding }">
        <div class="CardLeft">
            <img class="CardLeftImg" 
            :src="item.logo == 'UpLoadFiles\\qiye.png' ? `https://image.pollinations.ai/prompt/公司大厦${item.id}` : store.imgfengMian + item.logo" 
            alt="" loading="lazy" >
            <div class="CardLeftnr">
                <div class="CardLeftTitle">{{ item.name || '' }}</div>
                <div class="CardLeftTypeList">
                    <div class="CardLeftType">{{ item.type || '' }}</div>
                </div>
                <div class="CardLeftText">
                    <div>
                        <span>法定代表人：{{ item.legal_representative || '' }}</span>
                        <span>注册资本：{{ item.registered_capital || '' }}万元</span>
                        <span>成立日期：{{ item.establish_date || '' }}</span>
                        <span>统一社会信用代码：{{ item.unified_code || '' }}</span>
                    </div>
                    <div>
                        <template v-for="(contactGroup, type) in getGroupedContacts(item)" :key="type">
                            <span style="margin-right: 20px;">
                                {{ contactGroup.label }}：
                                {{ contactGroup.contacts.join(', ') }}
                            </span>
                        </template>
                    </div>
                    <div>
                        <span>地址：{{ item.address || '' }}</span>
                    </div>
                    <div v-if="showBusinessScope">
                        <span>经营范围：企业管理</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="CardRight" v-if="showDetail">
            <div class="ljxqBox" @click="qyxqJump(item.id)">了解详情</div>
        </div>
    </div>
</template>
<script setup>
import { sysContactType } from '@/api/dictionary.js';
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from '@/store/store';
const store = useStore()
const router = useRouter();
defineProps({
    showDetail: {
        type: Boolean,
        default: true
    },
    padding: {
        type: String,
        default: '30px'
    },
    showBusinessScope: {
        type: Boolean,
        default: false
    },
    qyList: {
        type: Array,
        default: () => ([])
    }
})
onMounted(() => {
    sysContactTypeFun()
})
const sysContactTypeData = ref([]);
const sysContactTypeFun = async () => {
    const res = await sysContactType();
    sysContactTypeData.value = res.data
};
const qyxqJump = (id) => {
    router.push({
        path: '/EnterpriseDetail',
        query: { id: id }
    });
}
const getGroupedContacts = (item) => {
    return item.contact?.reduce((acc, curr) => {
        const type = sysContactTypeData.value.find(t => t.dictValue === curr.lx_type);
        const key = type?.dictValue || 'unknown';
        if (!acc[key]) {
            acc[key] = {
                label: type?.dictLabel || '未知类型',
                contacts: []
            };
        }
        acc[key].contacts.push(curr.lx_phone);
        return acc;
    }, {});
};
</script>
<style scoped lang="scss">
.EnterpriseInformationListBox {
    // width: 100%;
    // height: 100%;
    background: #ffffff;
    border-top: 1px solid #F1F1F1;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .CardLeft {
        display: flex;
        flex-grow: 1;

        .CardLeftImg {
            width: 80px;
            height: 80px;
            border-radius: 50%;
        }

        .CardLeftnr {
            margin-left: 20px;
            width: 85%;

            .CardLeftTitle {
                font-weight: bold;
                font-size: 18px;
                color: #1F1F1F;
                margin-bottom: 10px;
            }

            .CardLeftTypeList {
                display: flex;

                .CardLeftType {
                    background: #D6F4FF;
                    padding: 4px 8px;
                    border-radius: 4px;
                    font-weight: 300;
                    font-size: 12px;
                    color: #0084FF;
                    margin-bottom: 16px;
                }
            }

            .CardLeftText {
                font-weight: 300;
                font-size: 14px;
                color: #1F1F1F;

                div {
                    margin-bottom: 8px; // div上下间距

                    &:last-child {
                        margin-bottom: 0;
                    }

                    span {
                        margin-right: 20px; // span左右间距

                        &:last-child {
                            margin-right: 0;
                        }
                    }
                }
            }

        }
    }

    .CardRight {
        flex-shrink: 0;

        .ljxqBox {
            background: #FFFFFF;
            border-radius: 4px;
            border: 1px solid #CCCCCC;
            font-weight: 300;
            font-size: 14px;
            color: #1F1F1F;
            padding: 5px 10px;
            cursor: pointer;
        }
    }
}
</style>